<template>
    <div class = "LiveAdmin">
      <div>
        <el-menu
          clss = ls
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#3b98f0"
          text-color="#fff"
          active-text-color="#ffd04b">
          <router-link to="/backliveAdminPersonal"><el-menu-item index="1" class = item>直播管理员</el-menu-item></router-link>
          <router-link to="/eventRecordsCenter"><el-menu-item index="2" class = item>赛事记录</el-menu-item></router-link>
          <router-link to="/competitionRecordCenter"><el-menu-item index="3" class = item>比赛记录</el-menu-item></router-link>
          <router-link to="/activityTypeCenter"><el-menu-item index="4" class = item>活动类型</el-menu-item></router-link>
        </el-menu>
      </div>
      <div class="lb">
        <el-carousel :interval="3000" type="card" height="200px">
          <el-carousel-item v-for="item in 6" :key="item">
            <h3 class="medium">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <router-view/>
    </div>

</template>

<script>
    export default {
        name: "index",
      data() {
        return {
          activeIndex: '1',
        };
      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    }

</script>
<style scoped lang="stylus">

  *
    margin 0;
    padding 0;
  .LiveAdmin
    font-size:30px
    width 1000px;
    margin 0 auto
  .item
    float left;
    margin-right 20px

  .LiveAdmin ul
    padding-left 300px
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.lb
    margin-top 20px
</style>
